<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>
<body>
    <!-- 搜索输入框 -->
     <input type="text" id="searchInput" placeholder="搜索...">
    <div id="results">显示搜索内容</div>
     <script>
      const searchInput = document.getElementById('searchInput');
      const results = document.getElementById('results');
  
  function debounce(func, delay) {
    let timer;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    };
  }
  
  function Search() {
    const query = searchInput.value.trim();
    if (query) {
      // 这里替换为实际的搜索逻辑
      console.log(`搜索: ${query}`);
      // 在模板字符串中 ${} 用于嵌入表达式
      results.textContent = `正在搜索: ${query}`;
      
     
    } else {
      results.textContent = '';
    }
  }
  
  const debouncedSearch = debounce(Search, 500);
  searchInput.addEventListener('input', debouncedSearch);
     </script>
</body>
</html>